<template>
  <div>
    <h1>父组件</h1>
    <son :info="info" :obj="obj" :msg="msg" @fun="fun" @foo="foo">
      <ul>
        <li>{{info}}</li>
      </ul>
    </son>
    
  </div>
</template>

<script lang="ts">
import { defineComponent,reactive,ref,provide} from 'vue'
import Son from './components/Son.vue';
export default defineComponent({
  components:{
    Son,
  },
  setup () {
    const info=ref('今天打开柜子发现被子长草了')
    const obj=reactive({
      name:'jack',
      age:10
    })
    // 需求：将info传递给孙子组件
    // 第一个参数key 第二个参数是传入的值，默认是unknown
    provide('info',info)
    provide('num',ref(1))
    provide('obj',obj)
    function foo() {
      console.log(info);
      // 此处的info和template模板中的info不一样
      //setup当中的info 是个ref对象，而template当中的info是字符串，info.value
      console.log('emit 第二个事件');
    }
    const msg=ref('计算机要从娃娃抓起')
    function fun(value:string){
      console.log('复习$emit自定义事件')
      console.log(info.value+value)
    }
    return {
      info,
      obj,
      foo,
      msg,
      fun,
    }
  }
})
</script>

<style scoped>

</style>